//渠道管理 - 渠道设置

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , Input, Row, Col, Table, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import TitleBtn from '../../../components/TitleBtn';

const FormItem = Form.Item;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
		key: i,
    identification: '58bf15e8e9504b50999dc8',
    canalName: '渠道01',
    contacts: '方明勇',
    phone: '18151211111',
    scale: 1,
    price: 10,
    statement: 'CPA',
    canalStatus: '启用',
    createTime: '2018-12-10',
    cz: ['预览', '复制短链接']
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}


class Setup extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
	
	handleSearch = () => {
		console.log(1);
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }

	render() {
		const { getFieldDecorator } = this.props.form;
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <Icon type="appstore" />
            <span className="apply-font">渠道设置列表</span>
            <TitleBtn />
            <div className="btn">
              <Button icon="plus" size="small">新增</Button>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('canal-number', {
                      rules: [{ required: true, message: 'Please input your canal-number!' }],
                    })(
                      <Input placeholder="渠道编号" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="联系人姓名" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('canal-name', {
                      rules: [{ required: true, message: 'Please input your canal-name!' }],
                    })(
                      <Input placeholder="渠道名称" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('Phone', {
                      rules: [{ required: true, message: 'Please input your phone!' }],
                    })(
                      <Input placeholder="联系方式" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='渠道标识' align='center' dataIndex='identification' width='180' />
              <Column title='渠道名称' align='center' dataIndex='canalName' width='80' />
              <Column title='联系人' align='center' dataIndex='contacts' width='80' />
              <Column title='联系方式' align='center' dataIndex='phone' width='80' />
              <Column title='显示比例' align='center' dataIndex='scale' width='70' />
              <Column title='单价' align='center' dataIndex='price' width='70' />
              <Column title='结算方式' align='center' dataIndex='statement' width='80' />
              <Column title='渠道状态' align='center' dataIndex='canalStatus' width='80' />
              <Column title='创建时间' align='center' dataIndex='createTime' width='80' />
              <Column title='操作' align='center' dataIndex='cz' width='180' 
                render={cz => (
                  <span>
                    <Tag color="orange" key="edit"><Icon type='edit' /></Tag>
                    {cz.map(cz => <Tag color="blue" key={cz}>{cz}</Tag>)}
                    <Tag color="orange" key="qy">启用</Tag>
                    <Tag color="red" key="jy">禁用</Tag>
                  </span>
                )} />
            </Table>
          </div>
        </div> 
      </LocaleProvider>  
		);
	}
}

const setupForm = Form.create()(Setup);

export default setupForm;